<template>
  <div class="text-to-image">
    <div class="container">
      <h1>文本转图片工具</h1>
      <el-form @submit.prevent="generateImage">
        <el-form-item label="输入文本">
          <el-input
            v-model="text"
            type="textarea"
            :rows="4"
            placeholder="请输入要转换的文本"
          ></el-input>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-select v-model="fontSize" placeholder="选择字体大小" class="font-select">
            <el-option
              v-for="size in [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72]"
              :key="size"
              :label="`${size}px`"
              :value="size"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="fontColor" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="backgroundColor" show-alpha allow-remove></el-color-picker>
        </el-form-item>
        <div class="button-group">
          <el-button type="primary" @click="generateImage">
            <el-icon><Picture /></el-icon>
            生成
          </el-button>
          <el-button type="success" @click="downloadImage" :disabled="!imageUrl">
            <el-icon><Download /></el-icon>
            下载
          </el-button>
          <el-button type="warning" @click="goToHomepage">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
        </div>
      </el-form>
      <div class="image-preview" v-if="imageUrl">
        <img :src="imageUrl" alt="Generated Image">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Picture, Download, Back } from '@element-plus/icons-vue'

const router = useRouter()
const text = ref('')
const fontSize = ref(24)
const fontColor = ref('#000000')
const backgroundColor = ref('#FFFFFF')
const imageUrl = ref('')

const generateImage = () => {
  if (!text.value.trim()) {
    ElMessage.warning('请输入要转换的文本')
    return
  }

  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  ctx.font = `${fontSize.value}px Arial`
  const lines = text.value.split('\n')
  const lineHeight = fontSize.value * 1.2
  const maxWidth = Math.max(...lines.map(line => ctx.measureText(line).width))
  const padding = 40
  canvas.width = maxWidth + padding * 2
  canvas.height = lineHeight * lines.length + padding * 2

  if (backgroundColor.value) {
    ctx.fillStyle = backgroundColor.value
    ctx.fillRect(0, 0, canvas.width, canvas.height)
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }

  ctx.fillStyle = fontColor.value
  ctx.font = `${fontSize.value}px Arial`
  ctx.textBaseline = 'middle'
  lines.forEach((line, index) => {
    const y = padding + (index + 0.5) * lineHeight
    ctx.fillText(line, padding, y)
  })

  imageUrl.value = canvas.toDataURL('image/png')
  ElMessage.success('图片生成成功！')
}

const downloadImage = () => {
  if (imageUrl.value) {
    const link = document.createElement('a')
    link.href = imageUrl.value
    link.download = 'text-to-image.png'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.text-to-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;

  .container {
    max-width: 800px;
    width: 98%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 25px;
    box-sizing: border-box;
    margin: 0 auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 2.5em;
      margin: 0 0 25px 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .el-form {
      .el-form-item {
        margin-bottom: 20px;

        .font-select {
          width: 100%;
        }
      }
    }

    .button-group {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;

      .el-button {
        flex: 1;
        max-width: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 6px;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
      }
    }

    .image-preview {
      display: flex;
      justify-content: center;
      margin-top: 20px;

      img {
        max-width: 100%;
        max-height: 300px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .text-to-image {
    padding: 10px;

    .container {
      padding: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .button-group {
        flex-direction: row;
        gap: 8px;

        .el-button {
          padding: 8px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
